{% extends 'base/base.html' %}
{% load static %}

{% block Title %}我的喜欢{% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'css/list-styles.css' %}">
{% endblock %}

{% block main %}
<div class="list-container">
    <div class="list-card">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1>❤️ 我的喜欢</h1>
            <p>收藏的音乐列表</p>
        </div>

        <!-- 音乐列表区域 -->
        <div class="music-list-area">
            <table class="music-table">
                <tbody>
                {% for song in love %}
                    <tr>
                        <td class="song-name" data-id="{{ song.id }}">
                            <a href="{% url 'main:details' song.id %}">{{ song.Title }}</a>
                        </td>
                        <td>{{ song.author }}</td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="2" class="empty-state">
                            <h3>🎵 还没有喜欢的歌曲</h3>
                            <p>快去发现你喜欢的音乐吧~</p>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <!-- 分页 -->
            <div class="pagination">
                {% if page_obj.has_previous %}
                    <a href="?page={{ page_obj.previous_page_number }}">上一页</a>
                {% else %}
                    <span>上一页</span>
                {% endif %}

                <span>第{{ page_obj.number }}页/共{{ paginator.num_pages }}页</span>

                {% if page_obj.has_next %}
                    <a href="?page={{ page_obj.next_page_number }}">下一页</a>
                {% else %}
                    <span>下一页</span>
                {% endif %}
            </div>
        </div>

        <!-- 返回按钮 -->
        <div style="text-align: center;">
            <a href="{% url 'main:index' %}" class="back-button">🏠 返回首页</a>
        </div>
    </div>
</div>
{% endblock %}






